<template>
  <div class="app-container">

    <el-row :gutter="12">
      <el-col :span="24">
        <el-card shadow="always">
          <el-form
            ref="formName"
            :label-position="labelPosition"
            :model="formLabelAlign"
            :rules="rules"
            label-width="80px"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="文章标题" prop="title">
                  <el-input v-model="formLabelAlign.title" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col>
                <el-form-item label="标签" prop="tag">
                  <el-select v-model="formLabelAlign.tag" multiple placeholder="请选择标签">
                    <el-option
                      v-for="item in tagList"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="选择分类" prop="nav">
                  <el-select v-model="formLabelAlign.nav" placeholder="请选择分类">
                    <el-option v-for="item in navList" :key="item.id" :label="item.title" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col>
                <el-button type="primary" @click="getHtml('formName')">保存文章</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card shadow="hover">
          <mavon-editor
            ref="md"
            v-model="value"
            :ishljs="true"
            style="height: 500px"
            @change="saves"
            @imgAdd="handleEditorImgAdd"
            @imgDel="imgDel"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

// 导航栏就是分类
// import {getNavList} from '@/api/nav'
// import {getTagList} from '@/api/tag'
// import {addArticle} from '@/api/article'
import { getNavList, getTagList, img, addArticle } from './api/api'

export default {
  data() {
    return {
      labelPosition: 'right',
      formLabelAlign: {
        title: '',
        tag: '',
        nav: ''
      },
      Content: '',
      navList: [],
      tagList: [],
      value: '',
      ContentHtml: '',
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        tag: [
          { required: true, message: '请输入tag标签', trigger: 'blur' }
        ],
        nav: [
          { required: true, message: '请选择发布栏目', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getNav()
    this.getTag()
    this.getNav()
  },
  methods: {
    // 删除图片
    imgDel(pos, file) {
      console.log(pos, file)
    },
    // 上传图片
    handleEditorImgAdd(pos, file) {
      var newdate = new FormData()
      newdate.append('file', file)

      img(newdate).then((res) => { // 图片上传到服务器返回图片url 链接
        console.log(res)
        this.$refs.md.$img2Url(pos, res.data) // 通过ref插入到文档中
      })
    },
    getNav() {
      getNavList().then(x => {
        this.navList = x.data
        console.log(this.navList)
      })
    },
    getHtml(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addArticle(Object.assign({
            content_html: this.Content,
            content: this.ContentHtml
          }, this.formLabelAlign)).then(x => {
            if (x.code == 20000) {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
            } else {
              this.$message({
                message: '添加失败',
                type: 'error'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })

      // addArticle(
      //   {
      //     'ContentHtml': this.ContentHtml,
      //     'Content': this.Content,
      //     ...this.formLabelAlign
      //   }
      // ).then(con => {
      //   console.log(con)
      // })
    },
    getTag() {
      getTagList().then(con => {
        this.tagList = con.data
        console.log(this.tagList)
      })
    },
    saves(e, con) {
      console.log(e)
      this.ContentHtml = e
      this.Content = con
    }
  }
}
</script>
